<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>skill</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>

<body>
    <aside>
        <nav>
            <img src="./img/head.jpg" alt="">
            <a href="./index.html"><i class="material-icons md-36">
                    home</i>
                <p>自我介绍</p>
            </a>

            <a href="./skills.html"><i class="material-icons md-36">
                    person</i>
                <p>技能掌握</p>
            </a>

            <a href="./life.html"><i class="material-icons md-36">
                    image</i>
                <p>生活写照</p>
            </a>

            <a href="./school.html"><i class="material-icons md-36">
                    school</i>
                <p>校内经历</p>
            </a>

            <a href="./communication.html"><i class="material-icons md-36">
                    mail</i>
                <p>沟通留言</p>
            </a>


        </nav>
    </aside>

    <nav class="mobile-nav">
        <a href="./index.html">自我介绍</a>
        <a href="./skills.html">技能掌握</a>
        <a href="./life.html">生活写照</a>
        <a href="./school.html">校内经历</a>
        <a href="./communication.html">沟通留言</a>

    </nav>

    <section class="about" id="about">
        <h2>技能掌握</h2>
        <p class="introduction-text">

            <span>Hello,I'm Edvard</span>
            我是一名计算机专业的大学三年级学生，在大学里我学习了许多有关前端的技能，比如HTML|CSS|JavaScript三剑客、JS库Jquery、UI框架Bootstrap、数据接口Ajax、前端服务器读写Node.js、前端项目框架Vue.js等

        </p>
        <br><br>
        <p class="introduction-text">
            对于前端的热爱，以及自己学习的付出，我相信自己一定可以在前端的学习路上越战越勇，越走越远的！！！
        </p>
        <h3>my skills</h3>
        <div class="skills-bank">

            <p>fima</p>
            <div class="container">
                <div class="skills figma">95%</div>
            </div>

            <p>Html 5</p>
            <div class="container">
                <div class="skills html">90%</div>
            </div>

            <p>CSS 3</p>
            <div class="container">
                <div class="skills css">85%</div>
            </div>

            <p>Javascript</p>
            <div class="container">
                <div class="skills js">65%</div>
            </div>

            <p>Jquery</p>
            <div class="container">
                <div class="skills php">60%</div>
            </div>

            <p>Vue.js</p>
            <div class="container">
                <div class="skills vue">55%</div>
            </div>

            <p>Node.js</p>
            <div class="container">
                <div class="skills node">50%</div>
            </div>
        </div>

    </section>

</body>

</html>